
import useLoginStore, {setAge, setObjA} from './../store/useLoginStore';
import {useShallow} from 'zustand/shallow';

// const Test1 = () => {
//     const {userName, version, age,setAge,setObjA, obj} = useLoginStore();
//     return (
//         <div>
//             <p>姓名: {userName}</p>
//             <p>版本号: {version}</p>
//             <p>周期: {age}</p>
//             <p>obj - a: {obj.a}</p>

//             <button onClick={setAge}>修改周期</button>
//             <button onClick={setObjA}>修改Obj对象里面的A</button>
//         </div>
//     )
// }

const Test1 = () => {
    const {userName, version, age,obj} = useLoginStore();
    return (
        <div>
            <p>姓名: {userName}</p>
            <p>版本号: {version}</p>
            <p>周期: {age}</p>
            <p>obj - a: {obj.a}</p>

            <button onClick={setAge}>修改周期</button>
            <button onClick={setObjA}>修改Obj对象里面的A</button>
        </div>
    )
}


const Test2 = () => {
    console.log('Test2 - render ...');
    const {userName} = useLoginStore(useShallow(state => ({userName: state.userName}))); // 只监听userName的变化，不会监听其他属性的变化(浅监听，只监听第一层属性的变化，不会监听第二层属性的变化=
    return <>
        <p>姓名: {userName}</p>
    </>
}

const TestZustand = () => {
    
    return (
      <>
        <Test1 />
        <hr />
        <Test2 />
      </>
    )
}


export default TestZustand;